<template>
	<view class="pb130">
		<mg-cell cname='bt' ht="商品标签" htc='c3 wei f30' />
		<mg-cell isr='1'>
			<view slot='bd' class="f-y-c f30 c0">
				<view class="f-1">ID</view>
				<view class="f-1">排序</view>
				<view class="f-1" style="flex-grow: 2;">名称</view>
				<view class="f-1 t-r">状态</view>
				<view class="f-1 t-r">操作</view>
			</view>
		</mg-cell>
		<mg-cell v-for="(v,i) in arr" :key='i' isr='1' :last="i==arr.length-1">
			<view slot='bd' class="f-y-c f30 c0">
				<view class="f-1 wbba">{{v.id}}</view>
				<view class="f-1 wbba">{{v.sort}}</view>
				<view class="f-1 f-y-c f-w" style="flex-grow: 2;">
					<view class="">{{v.name}}</view>
					<view class="ysk bs10 ml10" :style="{background:v.color}"></view>
				</view>
				<switch @change='switchChange($event,v.id)' :color="fColor" :checked="v.display==1"
					style="transform:scale(0.82)"></switch>
				<text @click="sc(v.id)" class="iconfont iconsc ml20 f40"></text>
				<text @click="bj(v.id)" class="iconfont iconbj ml20 f40"></text>
			</view>
		</mg-cell>
		<view class="foot-btnc">
			<button @click="tjdw" class="foot-btn" :style="{background:fColor}">+添加标签</button>
		</view>
		<mg-modal :vs='true' :ismr="true" v-model="show" width="650rpx" :z-index="3000">
			<view class="bs10 bf p-r">
				<text @click="show=false" class="ggx p-a iconfont iconcuo f50 c9"></text>
				<view class="p20 ggh f-c f32">
					<view class="t-o-e t-c" style="width: 80%;">{{isxz?'新增':'保存'}}标签</view>
				</view>
				<view class="ggb">
					<mg-input cname="p23" t='number' v-model="params.sort" isr='1' ht='排序' htc='f30' :pr='`请输入排序`'
						icn='f30' />
					<mg-input cname="p23" v-model="params.name" isr='1' ht='标签名称' htc='f30' :pr='`请输入标签名称`' icn='f30' />
					<!-- #ifdef APP-PLUS -->
					<mg-cell @tab='open' cname="p23" isr='1' ht='标签颜色' htc='f30' arrow='1'>
						<view slot='bd' class="f-y-c">
							<view class="bs10 mr10" style="width: 46rpx;height: 46rpx;"
								:style="{background:params.color}"></view>
							<view>{{params.color}}</view>
						</view>
					</mg-cell>
					<!-- #endif -->
					
					<!-- #ifndef APP-PLUS -->
					<mg-cell  cname="p23" isr='1' ht='标签颜色' htc='f30' arrow='1'>
						<view slot='bd' class="f-y-c">
							<view class="bs10 mr10" style="width: 46rpx;height: 46rpx;"
								:style="{background:params.color}"></view>
							<input v-model="params.color" />
						</view>
					</mg-cell>
					<!-- #endif -->
					
					<!-- <mg-input cname="p23" v-model="params.body" isr='1' ht='说明' htc='f30' :pr='`请输入说明`' icn='f30' /> -->
				</view>
				<button class="foot-btn3 w33" :style="{background:fColor}" @click="save" :disabled="loading"
					:loading="loading" style="margin: 30rpx auto;" hover-class="btnhc">确定</button>
			</view>
		</mg-modal>
		<!-- #ifdef APP-PLUS -->
		<t-color-picker ref="colorPicker" :color="color" @confirm="confirm"></t-color-picker>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		utilMixins
	} from "@/common/util-mixins.js"
	// #ifdef APP-PLUS
	import tColorPicker from '@/components/t-color-picker/t-color-picker.vue'
	// #endif
	import bkB from '@/components/common/block-b.vue'
	import mgModal from '@/components/common/modal.vue'
	import mgInput from '@/components/form/mg-input.vue'
	import utils from '@/common/utils.js'
	export default {
		name: 'spgl-dwsz',
		components: {
			// #ifdef APP-PLUS
			tColorPicker,
			// #endif
			bkB,
			mgModal,
			mgInput,
		},
		data() {
			return {
				arr: [],
				show: false,
				params: {
					id: '',
					sort: '',
					name: '',
					color: '',
					// body: '',
				},
				isxz: false,
				loading: false,
			}
		},
		onLoad(options) {
			// this.getSystem()
			this.util.setNT('商品标签设置')
			this.refreshList()
		},
		mixins: [utilMixins],
		computed: {},
		methods: {
			open(item) {
				this.$refs.colorPicker.open();
			},
			confirm(e) {
				this.params.color = e.hex
				// console.log('颜色选择器返回值：', e)
			},
			async switchChange(e, i) {
				let res = await this.util.request({
					'url': this.api.spbqkg,
					method: 'POST',
					mask: 1,
					data: {
						id: i,
						display: e.detail.value ? 1 : 2
					},
				}).catch(() => {

				})
				if (res) {
					this.util.message('操作成功', 1)
					this.refreshList();
				}
			},
			async sc(i) {
				try {
					await this.util.modal('确认删除吗')
					let res = await this.util.request({
						'url': this.api.spbqsc,
						method: 'POST',
						mask: 1,
						data: {
							id: i
						},
					}).catch(() => {

					})
					if (res) {
						this.util.message('操作成功', 1)
						this.refreshList();
					}
				} catch (e) {}
			},
			async bj(i) {
				this.isxz = false
				let {
					data
				} = await this.util.request({
					'url': this.api.spbqlb,
					mask: 1,
					data: {
						id: i
					},
				}).catch(() => {

				})
				for (let k in this.params) this.params[k] = data[k]
				this.show = true
			},
			async refreshList() {
				try {
					let {
						data
					} = await this.util.request({
						'url': this.api.spbqlb,
					}).catch(() => {

					})
					this.arr = data
				} catch (e) {}
			},
			tjdw() {
				this.isxz = true
				this.params.id = ''
				this.show = true
			},
			async save() {
				let judgeData = utils.isFailParams({
					field: this.params,
					filter: this.isxz ? ['id'] : [],
					tips: {
						id: '缺少id',
						sort: '请输入排序',
						name: '请输入名称',
						body: '请输入说明',
					}
				})
				if (!judgeData) {
					return
				} else {
					this.loading = true
					let res = await this.util.request({
						'url': this.api.spbqtj,
						method: 'POST',
						mask: 1,
						data: this.params,
					}).catch(() => {

					})
					if (!res) {
						this.loading = false
					} else {
						this.util.message('保存成功', 1, 1000)
						this.show = false
						this.refreshList();
						this.loading = false
					}
				}
			},
		},
	}
</script>
<style scoped lang="scss">
	.ggx {
		top: 20rpx;
		right: 20rpx;
	}

	.ysk {
		width: 34rpx;
		height: 34rpx;
	}
</style>
